<template>
	<view class="container">
		<uni-forms ref="form" :modelValue="item" :rules="rules">
			<uni-forms-item label="名称" required name="name">
				<uni-easyinput v-model="item.name" placeholder="请输入名称" />
			</uni-forms-item>
			<uni-forms-item label="内容" name="describe">
				<uni-easyinput type="textarea" v-model="item.describe" placeholder="请输入描述" />
			</uni-forms-item>
			<uni-forms-item label="类型" required name="type">
				<uni-data-checkbox v-model="item.type" :localdata="types" />
			</uni-forms-item>
			<uni-forms-item label="重要程度" required name="important">
				<slider :value="item.important" @change="sliderChange" step="1" min="1" max="10" show-value />
			</uni-forms-item>
			<uni-forms-item label="天数" required name="important">
				<view class="show-days">
					<text v-for="(item, index) in dates" :key="item" @click="clickDay(index, item)">{{item}}</text>
				</view>
				<slider :value="selectDate" @change="sliderAddChange" step="1" min="0" max="180" show-value />
			</uni-forms-item>
			<button type="primary" @click="validateSubmit">提交</button>
		</uni-forms>
	</view>
</template>

<script>
	import {
		myuuid,
		getMemoryDates
	} from '../../../../common/common';
	import {
		MemoryApi
	} from '../../../../backend/memory/MemoryApi';
	import {
		getTimeMs
	} from '../../../../common/date';

	export default {
		data() {
			return {
				clickTimes: 0, // 记录点击次数
				item: {
					name: '',
					describe: '',
					type: 2,
					describe_type: 1,
					photos: [],
					important: 4,
					future_times: [],
					// hobby: [5],
					// datetimesingle: 1627529992399,
					create_by: myuuid()
				},
				rules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入姓名',
							},
							{
								minLength: 2,
								maxLength: 1024,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
				},
				// 单选数据源
				types: [{
					text: '练习',
					value: 1
				}, {
					text: '记忆',
					value: 2
				}, {
					text: '诵读',
					value: 3
				}],
				hobbys: [{
					text: '跑步',
					value: 0
				}, {
					text: '游泳',
					value: 1
				}, {
					text: '绘画',
					value: 2
				}, {
					text: '足球',
					value: 3
				}, {
					text: '篮球',
					value: 4
				}, {
					text: '其他',
					value: 5
				}],
				// 时间间隔天数。
				dates: getMemoryDates(),
				selectDate: 0,
				startDate: new Date()
			};
		},
		methods: {
			sliderChange(e) {
				this.item.important = e.detail.value;
			},
			clickDay(index, item) {
				console.log(index, item);
				this.clickTimes++;
				if (this.clickTimes === 2) {
					// 处理双击事件
					this.clickTimes = 0;
					this.delDays(index);
				} else {
					setTimeout(() => {
						if (this.clickTimes === 1) {
							// 处理单击事件
							this.clickTimes = 0;
							this.addDays(item);
						}
					}, 250); // 设置一个小于用户双击的时间间隔的延时
				}
			},
			addDays(item) {
				if (!this.selectDate) {
					uni.showToast({
						icon: 'error',
						title: `请先选择天数`
					})
					return;
				}
				const newDay = item + this.selectDate;
				if (this.dates.includes(newDay)) {
					uni.showToast({
						icon: 'error',
						title: `该天数：${newDay} 已经存在`
					})
					return;
				}
				this.dates.push(newDay);
				this.dates.sort((a, b) => a - b);
			},
			delDays(index) {
				console.log('要删除' + index);
				this.dates.splice(index, 1);
			},
			sliderAddChange(e) {
				this.selectDate = e.detail.value;
			},
			validateSubmit() {
				console.log('xxxddd', JSON.stringify(this.item));
				this.item.futureDateArr = this.dates;
				this.item.startDate = this.startDate;
				console.log('++++++++++++');
				MemoryApi.add(this.item).then(v => {
					uni.showToast({
						title: `添加成功`
					})
				}).catch((e) => {
					console.log('添加失败', e);
					uni.showToast({
						title: `添加失败${JSON.stringify(e)}`
					})
				})
				// backend.add(this.item).then(v=>{
				// 	console.log('+++++', v);
				// }).catch((e: any)=>{
				// 	console.log('99999', e);
				// })
				// this.$refs.form.validate().then(res => {
				// 	console.log('校验通过，表单数据信息：', res);
				// 	return this.submit();
				// }).catch(err => {
				// 	console.log('校验失败，表单错误信息：', err);
				// })
			},

			async submit() {
				console.log('xxxddd', JSON.stringify(this.item));
				this.item.future_times.push(getTimeMs());

				// const db = uniCloud.database();
				// db.collection('memory').add(this.item).then(e => {
				// 	console.log('添加完成，', e);
				// 	uni.showToast({
				// 		title: `添加成功`
				// 	})
				// 	uni.navigateBack();
				// }).catch(e => {
				// 	console.log('错误：：', e);
				// })
			}
		}
	}
</script>

<style lang="scss">
	.container {
		margin: 5px;

		.show-days {
			display: flex;
			flex-wrap: wrap;

			text {
				margin: 3px 5px;
				padding: 2px 5px;
				background-color: bisque;
				min-width: 15px;
				text-align: center;
			}
		}

	}
</style>